<template>
  <view class="container">
    <!-- 使用TaskDrawer组件 -->
    <task-drawer 
      :tasks="taskHistory" 
      :active-task-id="taskId" 
      :progress-width="progressWidth" 
      :is-open="isDrawerOpen"
      @open="openDrawer"
      @close="closeDrawer"
      @clear="clearTaskHistory"
    />
    
    <view class="content-container">
      <view class="main-title-container">
        <text class="main-title">快速换装</text>
        <view class="tabs-container">
          <view class="tab active">
            <text>模特换装</text>
          </view>
        </view>
      </view>
      
      <view class="upload-panel">
        <view class="upload-column">
          <view class="upload-row">
            <view class="upload-card">
              <view class="card-label">模特图像</view>
              <view class="upload-area" @click="chooseImage('target')" :class="{'has-image': targetImage}">
                <template v-if="targetImage">
                  <image :src="targetImage" mode="aspectFill" class="preview-image"></image>
                  <view class="image-overlay">
                    <view class="edit-button">编辑</view>
                  </view>
                  <view class="delete-button" @click.stop="deleteImage('target')">
                    <text class="delete-icon">×</text>
                  </view>
                </template>
                <template v-else>
                  <view class="upload-icon">
                    <text class="icon-plus">+</text>
                  </view>
                  <text class="upload-text">上传模特图像</text>
                  <text class="upload-desc">被替换的目标图像</text>
                </template>
              </view>
            </view>
            
            <view class="upload-card">
              <view class="card-label">服装图像</view>
              <view class="upload-area" @click="chooseImage('face')" :class="{'has-image': faceImage}">
                <template v-if="faceImage">
                  <image :src="faceImage" mode="aspectFill" class="preview-image"></image>
                  <view class="image-overlay">
                    <view class="edit-button">编辑</view>
                  </view>
                  <view class="delete-button" @click.stop="deleteImage('face')">
                    <text class="delete-icon">×</text>
                  </view>
                </template>
                <template v-else>
                  <view class="upload-icon">
                    <text class="icon-plus">+</text>
                  </view>
                  <text class="upload-text">上传服装图像</text>
                  <text class="upload-desc">提供面部细节的源图像</text>
                </template>
              </view>
            </view>
          </view>
        </view>
        
        <view class="tips-container">
          <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text">上传一张模特图像和一张服装图像，点击运行即可完成换脸</text>
          </view>
          
          <!-- 配饰选择区域 -->
          <accessory-selector v-model="selectedAccessory"></accessory-selector>
          
          <view class="tip-item">
            <view class="tip-icon">i</view>
            <text class="tip-text">您可以选择添加鞋子、帽子或眼镜等配饰，将自动应用到生成的图像中。选择"无"则不添加任何配饰。</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 结果展示区域 -->
    <view class="result-section" v-if="resultImage">
      <view class="result-header">
        <text class="result-title">生成结果</text>
        <view class="result-actions">
          <view class="action-button" @click="regenerateImage">
            <text class="action-button-icon"><i class="icon-refresh"></i></text>
            <text class="action-button-text">重新生成</text>
          </view>
          <view class="action-button" @click="downloadImage">
            <text class="action-button-icon"><i class="icon-download"></i></text>
            <text class="action-button-text">下载</text>
          </view>
        </view>
      </view>
      
      <view class="result-preview">
        <image :src="resultImage" mode="aspectFit" class="result-image"></image>
        <view class="result-overlay" @click="previewImage">
          <view class="zoom-button">
            <view class="tech-zoom-icon"></view>
          </view>
        </view>
      </view>
      
      <view class="result-footer">
        <text class="result-info">Light bulb · 工作流</text>
        <view class="share-button" @click="shareImage">
          <view class="share-icon-container">
            <view class="tech-share-icon"></view>
          </view>
          <text class="share-text">分享</text>
        </view>
      </view>
    </view>

    <!-- 加载中指示器 -->
    <view class="loading-overlay" v-if="isProcessing">
      <view class="loading-container">
        <view class="loading-indicator">
          <view class="loading-circle" v-for="(item, index) in 4" :key="index" :style="{'animation-delay': index * 0.15 + 's'}"></view>
        </view>
        <text class="loading-text">{{ loadingText }}</text>
      </view>
    </view>

    <view class="bottom-bar">
      <view class="action-group">
        <view class="action-circle">
          <text class="action-icon">⋮</text>
        </view>
        <view class="action-circle">
          <text class="action-icon">♡</text>
        </view>
      </view>
      <button 
        class="run-button" 
        :class="{'button-active': targetImage || faceImage, 'button-loading': isProcessing}"
        :disabled="!targetImage && !faceImage || isProcessing"
        @click="handleRun">
        <text class="run-button-text">{{ isProcessing ? '处理中...' : '开始换装' }}</text>
        <view class="button-loading-indicator" v-if="isProcessing">
          <view class="loading-dot" v-for="(dot, index) in 3" :key="index" :style="{'animation-delay': index * 0.2 + 's'}"></view>
        </view>
      </button>
    </view>

    <!-- 全屏图片预览 -->
    <view class="fullscreen-preview" v-if="previewVisible" @click="closePreview">
      <image :src="previewImageUrl" mode="aspectFit" class="fullscreen-image"></image>
      <view class="preview-close">×</view>
    </view>
  </view>
</template>

<script>
import runningHubService from '../../utils/runningHubService.js';
import TaskDrawer from '../../components/TaskDrawer.vue';
import AccessorySelector from '../../components/AccessorySelector.vue';

export default {
  components: {
    TaskDrawer,
    AccessorySelector
  },
  data() {
    return {
      targetImage: '', // 目标图像的路径
      faceImage: '', // 换脸图像的路径
      resultImage: '', // 结果图片的路径
      apiKey: '', // RunningHub API KEY
      workflowId: '1906243475057070081', // 换脸工作流ID
      taskId: '', // 当前任务ID
      statusTimer: null, // 状态查询定时器
      isProcessing: false, // 是否正在处理中
      lastGenParams: null, // 上次生成的参数，用于重新生成
      loadingText: '正在处理中...', // 加载文本
      checkTaskFailCount: 0, // 任务查询失败计数
      taskHistory: [], // 任务历史记录
      isDrawerOpen: false, // 侧边抽屉是否打开
      progressWidth: '20%', // 进度条宽度
      previewVisible: false, // 是否显示全屏预览
      previewImageUrl: '', // 全屏预览的图片URL
      selectedAccessory: 'none', // 选中的配饰类型: 'shoes', 'hat', 'glasses', 'none'
      workflow: {}, // 工作流信息
      isLoadingWorkflow: false, // 是否正在加载工作流信息
      posePointsNodeId: '', // 根据实际情况填写
      shoeBatchPointsNodeId: '' // 根据实际情况填写
    };
  },
  onLoad() {
    // 从服务实例获取默认API KEY
    this.apiKey = runningHubService.getApiKey();
    
    // 初始化需要获取工作流信息
    this.initWorkflowInfo();
    
    // 从本地存储加载任务历史
    this.loadTaskHistory();
  },
  onShow() {
    // 页面显示时检查是否有之前的结果
    if (this.taskId && !this.resultImage) {
      this.checkTaskStatus();
    }
  },
  onHide() {
    // 页面隐藏时清除定时器
    if (this.statusTimer) {
      clearInterval(this.statusTimer);
      this.statusTimer = null;
    }
  },
  methods: {
    // 初始化工作流信息
    async initWorkflowInfo() {
      this.isLoadingWorkflow = true;
      try {
        // 检查API Key是否设置
        if (!this.apiKey) {
          console.error('API Key未设置，无法获取workflow信息');
          this.isLoadingWorkflow = false;
          return;
        }

        console.log('开始获取workflow信息，workflowId:', this.workflowId);
        const workflowData = await runningHubService.getWorkflowJson(this.workflowId);
        console.log('获取到workflowData:', workflowData);

        // 验证workflow数据格式
        if (!workflowData || !workflowData.data || !workflowData.data.prompt) {
          console.error('获取到的workflow数据格式不正确:', workflowData);
          this.isLoadingWorkflow = false;
          return;
        }

        try {
          // 解析workflow json
          this.workflow = JSON.parse(workflowData.data.prompt);
          console.log('解析后的workflow对象:', this.workflow);

          // 检查节点177是否存在
          if (this.workflow[177]) {
            // 确保节点177有inputs字段
            if (!this.workflow[177].inputs) {
              console.log('节点177没有inputs字段，创建默认值');
              this.workflow[177].inputs = {};
            }

            // 记录节点177的inputs
            console.log('节点177当前inputs:', JSON.stringify(this.workflow[177].inputs));

            // 确保模型参数正确设置
            this.workflow[177].inputs.model = "segformer_b3_fashion";
            console.log('已设置节点177的model参数为:"segformer_b3_fashion"');

            // 指定姿态点和鞋子批次点的节点ID，后续需要填入实际值
            this.posePointsNodeId = '179'; // 根据实际情况填写
            this.shoeBatchPointsNodeId = '180'; // 根据实际情况填写
          } else {
            console.warn('节点177不存在于workflow中，配饰选择功能可能不可用');
          }
        } catch (parseError) {
          console.error('解析workflow JSON失败:', parseError);
        }

        console.log('workflow初始化完成');
        this.isLoadingWorkflow = false;
      } catch (error) {
        console.error('初始化workflow失败:', error);
        this.isLoadingWorkflow = false;
      }
    },
    // 从本地存储加载任务历史
    loadTaskHistory() {
      try {
        const history = uni.getStorageSync('faceswapTaskHistory');
        if (history) {
          this.taskHistory = JSON.parse(history);
          
          // 检查是否有正在进行的任务
          const pendingTask = this.taskHistory.find(task => 
            task.status === 'PENDING' || task.status === 'PROCESSING'
          );
          
          if (pendingTask) {
            this.taskId = pendingTask.id;
            this.startCheckingTaskStatus();
          }
        }
      } catch (error) {
        console.error('加载任务历史失败:', error);
        this.taskHistory = [];
      }
    },
    
    // 保存任务历史到本地存储
    saveTaskHistory() {
      try {
        uni.setStorageSync('faceswapTaskHistory', JSON.stringify(this.taskHistory));
      } catch (error) {
        console.error('保存任务历史失败:', error);
      }
    },
    
    // 添加新任务到历史记录
    addTaskToHistory(taskId) {
      const now = new Date();
      const task = {
        id: taskId,
        status: 'PENDING',
        startTime: now.toLocaleString(),
        timestamp: now.getTime(),
        duration: null,
        resultImage: null
      };
      
      // 添加到历史记录开头
      this.taskHistory.unshift(task);
      
      // 限制历史记录最多保存10条
      if (this.taskHistory.length > 10) {
        this.taskHistory = this.taskHistory.slice(0, 10);
      }
      
      this.saveTaskHistory();
    },
    
    // 更新任务状态
    updateTaskStatus(taskId, status) {
      const taskIndex = this.taskHistory.findIndex(task => task.id === taskId);
      if (taskIndex !== -1) {
        this.taskHistory[taskIndex].status = status;
        
        // 如果任务完成或失败，计算持续时间
        if (status === 'SUCCESS' || status === 'FAILED') {
          const now = new Date().getTime();
          const startTime = this.taskHistory[taskIndex].timestamp;
          const seconds = Math.floor((now - startTime) / 1000);
          
          let duration = '';
          if (seconds < 60) {
            duration = `${seconds}秒`;
          } else {
            const minutes = Math.floor(seconds / 60);
            const remainingSeconds = seconds % 60;
            duration = `${minutes}分${remainingSeconds}秒`;
          }
          
          this.taskHistory[taskIndex].duration = duration;
        }
        
        this.saveTaskHistory();
      }
    },
    
    // 选择图片
    chooseImage(type) {
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          
          if (type === 'target') {
            this.targetImage = tempFilePath;
          } else if (type === 'face') {
            this.faceImage = tempFilePath;
          }
        }
      });
    },
    
    // 删除图片
    deleteImage(type) {
      if (type === 'target') {
        this.targetImage = '';
      } else if (type === 'face') {
        this.faceImage = '';
      }
    },
    
    // 在目标图像和源图像都上传后运行
    async handleRun() {
      if (!this.targetImage || !this.faceImage) {
        uni.showToast({
          title: '请先上传图片',
          icon: 'none'
        });
        return;
      }
      
      if (this.isProcessing) {
        return;
      }
      
      this.isProcessing = true;
      this.loadingText = '正在上传图片...';
      
      try {
        const uploadPromises = [];
        
        // 上传目标图片
        uploadPromises.push(runningHubService.uploadImage(this.targetImage));
        
        // 上传源图片
        uploadPromises.push(runningHubService.uploadImage(this.faceImage));
        
        // 等待所有图片上传完成
        const [targetImageUrl, faceImageUrl] = await Promise.all(uploadPromises);
        
        // 保存本次请求参数，用于重新生成
        this.lastGenParams = {
          targetImageUrl,
          faceImageUrl
        };
        
        // 调用换脸工作流
        await this.runFaceSwapTask(targetImageUrl, faceImageUrl);
      } catch (error) {
        console.error('运行失败:', error);
        uni.showToast({
          title: '运行失败: ' + error.message,
          icon: 'none'
        });
        this.isProcessing = false;
      }
    },
    
    // 启动进度条动画
    startProgressAnimation() {
      // 逐渐增加进度条宽度，模拟进度
      this.progressWidth = '20%';
      
      setTimeout(() => {
        this.progressWidth = '40%';
      }, 3000);
      
      setTimeout(() => {
        this.progressWidth = '60%';
      }, 8000);
      
      setTimeout(() => {
        this.progressWidth = '80%';
      }, 15000);
    },
    
    // 运行换脸任务
    async runFaceSwapTask(targetImageUrl, faceImageUrl) {
      this.loadingText = '正在提交任务...';
      
      console.log('开始运行换脸任务，配饰选择:', this.selectedAccessory);
      
      try {
        // 准备节点信息列表
        const nodeInfoList = [
          { nodeId: '2', fieldName: 'image', fieldValue: targetImageUrl },
          { nodeId: '3', fieldName: 'image', fieldValue: faceImageUrl }
        ];
        
        // 如果有workflow对象且有配饰节点
        if (this.workflow && this.workflow[177]) {
          // 首先确保模型参数正确设置
          this.workflow[177].inputs.model = "segformer_b3_fashion";
          
          // 重置所有可能的配饰选项为false
          this.workflow[177].inputs.applique = false;
          this.workflow[177].inputs.bagwallet = false;
          this.workflow[177].inputs.bead = false;
          this.workflow[177].inputs.belt = false;
          this.workflow[177].inputs.bow = false;
          this.workflow[177].inputs.buckle = false;
          this.workflow[177].inputs.cape = false;
          this.workflow[177].inputs.cardigan = false;
          this.workflow[177].inputs.coat = false;
          this.workflow[177].inputs.collar = false;
          this.workflow[177].inputs.dress = false;
          this.workflow[177].inputs.epaulette = false;
          this.workflow[177].inputs.flower = false;
          this.workflow[177].inputs.fringe = false;
          this.workflow[177].inputs.glasses = false;
          this.workflow[177].inputs.glove = false;
          this.workflow[177].inputs.hairaccessory = false;
          this.workflow[177].inputs.hat = false;
          this.workflow[177].inputs.hood = false;
          this.workflow[177].inputs.jacket = false;
          this.workflow[177].inputs.jumpsuit = false;
          this.workflow[177].inputs.lapel = false;
          this.workflow[177].inputs.legwarmer = false;
          this.workflow[177].inputs.neckline = false;
          this.workflow[177].inputs.pants = false;
          this.workflow[177].inputs.pocket = false;
          this.workflow[177].inputs.ribbon = false;
          this.workflow[177].inputs.rivet = false;
          this.workflow[177].inputs.ruffle = false;
          this.workflow[177].inputs.scarf = false;
          this.workflow[177].inputs.sequin = false;
          this.workflow[177].inputs.shirt = false;
          this.workflow[177].inputs.shoe = false;
          this.workflow[177].inputs.shorts = false;
          this.workflow[177].inputs.skirt = false;
          this.workflow[177].inputs.sleeve = false;
          this.workflow[177].inputs.sock = false;
          this.workflow[177].inputs.sweater = false;
          this.workflow[177].inputs.tassel = false;
          this.workflow[177].inputs.tie = false;
          this.workflow[177].inputs.tights = false;
          this.workflow[177].inputs.top = false;
          this.workflow[177].inputs.umbrella = false;
          this.workflow[177].inputs.vest = false;
          this.workflow[177].inputs.watch = false;
          this.workflow[177].inputs.zipper = false;
          
          // 如果用户选择了配饰（不是none），则设置为true
          if (this.selectedAccessory && this.selectedAccessory !== 'none') {
            console.log(`设置配饰 ${this.selectedAccessory} = true`);
            this.workflow[177].inputs[this.selectedAccessory] = true;
            
            // 添加到节点信息中
            nodeInfoList.push({
              nodeId: '177',
              fieldName: this.selectedAccessory,
              fieldValue: true
            });
          }
          
          // 添加模型参数到节点信息中
          nodeInfoList.push({
            nodeId: '177',
            fieldName: "model",
            fieldValue: "segformer_b3_fashion"
          });
          
          // 记录完整的请求数据用于调试
          console.log('创建任务的节点信息:', nodeInfoList);
          console.log('选择的配饰:', this.selectedAccessory);
          console.log('节点177的inputs:', JSON.stringify(this.workflow[177].inputs));
        }
        
        const taskResult = await runningHubService.createComfyUITask(
          this.workflowId,
          nodeInfoList,
          this.workflow ? JSON.stringify(this.workflow) : undefined
        );
        
        if (taskResult && taskResult.taskId) {
          this.taskId = taskResult.taskId;
          
          // 添加任务到历史记录
          this.addTaskToHistory(this.taskId);
          
          // 开始轮询任务状态
          this.startCheckingTaskStatus();
        } else {
          throw new Error('创建任务失败');
        }
      } catch (error) {
        console.error('创建任务失败:', error);
        throw error;
      }
    },
    
    // 开始检查任务状态
    startCheckingTaskStatus() {
      if (this.statusTimer) {
        clearInterval(this.statusTimer);
      }
      
      this.checkTaskStatus();
      this.statusTimer = setInterval(this.checkTaskStatus, 2000);
    },
    
    // 检查任务状态
    async checkTaskStatus() {
      if (!this.taskId) return;
      
      try {
        const statusResult = await runningHubService.queryTaskStatus(this.taskId);
        
        // 查询成功，重置失败计数
        this.checkTaskFailCount = 0;
        
        // 更新任务状态
        this.updateTaskStatus(this.taskId, statusResult.data);
        
        if (statusResult.data === 'SUCCESS') {
          // 更新加载文本
          this.loadingText = '正在获取生成结果...';
          
          // 任务成功，获取结果
          await this.getTaskResult();
          
          // 清除定时器
          if (this.statusTimer) {
            clearInterval(this.statusTimer);
            this.statusTimer = null;
          }
          
          // 重置处理状态
          this.isProcessing = false;
        } else if (statusResult.data === 'FAILED') {
          // 任务失败
          uni.showToast({
            title: '任务处理失败',
            icon: 'none'
          });
          
          // 清除定时器
          if (this.statusTimer) {
            clearInterval(this.statusTimer);
            this.statusTimer = null;
          }
          
          // 重置处理状态
          this.isProcessing = false;
        } else if (statusResult.data === 'RUNNING') {
          // 更新加载文本显示进度
          this.loadingText = '正在处理中，请稍候...';
        } else if (statusResult.data === 'PENDING') {
          this.loadingText = '任务排队中，请稍候...';
        }
        // 其他状态继续等待
      } catch (error) {
        console.error('检查任务状态失败:', error);
        
        // 增加失败计数
        this.checkTaskFailCount++;
        
        // 如果连续失败多次，考虑重置状态
        if (this.checkTaskFailCount >= 5) {
          this.isProcessing = false;
          
          if (this.statusTimer) {
            clearInterval(this.statusTimer);
            this.statusTimer = null;
          }
          
          uni.showToast({
            title: '任务状态查询失败',
            icon: 'none'
          });
        }
      }
    },
    
    // 获取任务结果
    async getTaskResult() {
      try {
        const resultData = await runningHubService.getTaskResult(this.taskId);
        
        if (resultData && resultData.data && resultData.data.length > 0) {
          // 获取最后一个输出作为最终结果
          const lastOutput = resultData.data[resultData.data.length - 1];
          
          if (lastOutput.outputType === 'image') {
            // 更新结果图像
            this.resultImage = lastOutput.outputUrl;
            
            // 更新任务结果图片
            const taskIndex = this.taskHistory.findIndex(task => task.id === this.taskId);
            if (taskIndex !== -1) {
              this.taskHistory[taskIndex].resultImage = this.resultImage;
              this.saveTaskHistory();
            }
          } else {
            throw new Error('未获取到图像类型的结果');
          }
        } else {
          throw new Error('未获取到结果图片');
        }
      } catch (error) {
        console.error('获取任务结果失败:', error);
        uni.showToast({
          title: '获取结果失败',
          icon: 'none'
        });
      }
    },
    
    // 重新生成图片
    async regenerateImage() {
      if (!this.lastGenParams) {
        uni.showToast({
          title: '没有可重新生成的参数',
          icon: 'none'
        });
        return;
      }
      
      if (this.isProcessing) {
        return;
      }
      
      this.isProcessing = true;
      this.loadingText = '正在重新生成...';
      
      try {
        // 调用换脸工作流
        await this.runFaceSwapTask(
          this.lastGenParams.targetImageUrl,
          this.lastGenParams.faceImageUrl
        );
      } catch (error) {
        console.error('重新生成失败:', error);
        uni.showToast({
          title: '重新生成失败: ' + error.message,
          icon: 'none'
        });
        this.isProcessing = false;
      }
    },
    
    // 下载图片
    downloadImage() {
      if (!this.resultImage) return;
      
      uni.downloadFile({
        url: this.resultImage,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 下载特定任务图片
    downloadTaskImage(imageUrl) {
      if (!imageUrl) return;
      
      uni.downloadFile({
        url: imageUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '保存成功',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 预览图片
    previewImage() {
      if (!this.resultImage) return;
      
      this.previewImageUrl = this.resultImage;
      this.previewVisible = true;
    },
    
    // 查看任务结果
    viewTaskResult(task) {
      if (task && task.resultImage) {
        this.previewImageUrl = task.resultImage;
        this.previewVisible = true;
      }
    },
    
    // 关闭预览
    closePreview() {
      this.previewVisible = false;
      this.previewImageUrl = '';
    },
    
    // 分享图片
    shareImage() {
      uni.showToast({
        title: '分享功能开发中',
        icon: 'none'
      });
    },
    
    // 打开侧边任务列表抽屉
    openDrawer() {
      this.isDrawerOpen = true;
    },
    
    // 关闭侧边任务列表抽屉
    closeDrawer() {
      this.isDrawerOpen = false;
    },
    
    // 获取任务状态文本
    getStatusText(status) {
      switch (status) {
        case 'PENDING':
          return '等待中';
        case 'PROCESSING':
          return '进行中';
        case 'SUCCESS':
          return '完成';
        case 'FAILED':
          return '失败';
        default:
          return '未知状态';
      }
    },
    
    // 清空任务历史
    clearTaskHistory() {
      this.taskHistory = [];
      this.saveTaskHistory();
      uni.showToast({
        title: '历史记录已清空',
        icon: 'success'
      });
    },
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f0f8f5;
  padding: 30rpx 0 0;
  position: relative;
}

.content-container {
  flex: 1;
  padding: 0 30rpx;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.main-title-container {
  margin-bottom: 30rpx;
  position: relative;
}

.main-title {
  font-size: 48rpx;
  font-weight: 700;
  color: #2c5c4e;
  margin-bottom: 8rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #5a8a7a;
  margin-bottom: 16rpx;
}

.tabs-container {
  display: flex;
  margin-top: 20rpx;
}

.tab {
  padding: 16rpx 32rpx;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 32rpx;
  margin-right: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.tab.active {
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.3);
  border: none;
}

.tab text {
  font-size: 28rpx;
  color: #5a8a7a;
  font-weight: 500;
}

.tab.active text {
  color: #FFFFFF;
}

.upload-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.upload-column {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
  margin-bottom: 30rpx;
}

.upload-row {
  display: flex;
  justify-content: space-between;
  gap: 30rpx;
  width: 100%;
  margin-bottom: 30rpx;
}

.upload-row .upload-card {
  flex: 1;
  width: 48%;
}

.upload-card {
  background: linear-gradient(135deg, #ffffff 0%, #f5faf8 100%);
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 6rpx 16rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.card-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c5c4e;
  margin-bottom: 20rpx;
}

.upload-area {
  height: 240rpx;
  border-radius: 12rpx;
  background-color: #e6f4ee;
  border: 2rpx dashed #b8dbd2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.upload-area::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 6s infinite;
  opacity: 0.4;
}

.upload-area.has-image {
  border-style: solid;
  border-color: #b8dbd2;
  box-shadow: 0 4rpx 16rpx rgba(33, 171, 134, 0.1);
}

.upload-icon {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.1);
  position: relative;
  overflow: hidden;
}

.upload-icon::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.icon-plus {
  font-size: 50rpx;
  color: #21ab86;
  font-weight: 300;
}

.upload-text {
  font-size: 28rpx;
  color: #2c5c4e;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.upload-desc {
  font-size: 24rpx;
  color: #5a8a7a;
}

.preview-image {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.3s ease;
}

.upload-area:active .image-overlay {
  opacity: 1;
}

.edit-button {
  background-color: #FFFFFF;
  color: #333333;
  padding: 12rpx 36rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.delete-button {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  width: 50rpx;
  height: 50rpx;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 25rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.delete-icon {
  color: #333333;
  font-size: 34rpx;
  line-height: 1;
}

.tips-container {
  margin-bottom: 30rpx;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16rpx;
  background-color: rgba(33, 171, 134, 0.05);
  padding: 16rpx 24rpx;
  border-radius: 12rpx;
  border-left: 4rpx solid #21ab86;
}

.tip-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background-color: #21ab86;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  font-weight: 600;
  margin-right: 16rpx;
  flex-shrink: 0;
  margin-top: 4rpx;
}

.tip-text {
  font-size: 24rpx;
  color: #5a8a7a;
  line-height: 1.6;
  flex: 1;
}

/* 底部操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 110rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(33, 171, 134, 0.1);
  z-index: 100;
}

.action-group {
  display: flex;
  gap: 20rpx;
}

.action-circle {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f0f8f5 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.action-circle::after {
  content: '';
  position: absolute;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.8) 0%,
    rgba(255, 255, 255, 0) 70%
  );
  opacity: 0.2;
}

.action-icon {
  font-size: 32rpx;
  color: #5a8a7a;
}

.run-button {
  width: 65%;
  height: 90rpx;
  border-radius: 45rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #e6f4ee 0%, #d8ede5 100%);
  color: #5a8a7a;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  position: relative;
  overflow: hidden;
}

.run-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(45deg);
  animation: shimmer 3s infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.button-active {
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  color: #FFFFFF;
  box-shadow: 0 6rpx 16rpx rgba(33, 171, 134, 0.3);
  border: none;
}

.button-active::before {
  opacity: 1;
}

@keyframes shimmer {
  0% {
    transform: translateX(-150%) rotate(45deg);
  }
  100% {
    transform: translateX(150%) rotate(45deg);
  }
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(78, 125, 249, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(78, 125, 249, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 125, 249, 0); }
}

.button-active:not([disabled]) {
  animation: pulse 2s infinite;
}

/* 结果展示区域 */
.result-section {
  margin: 30rpx 30rpx 120rpx;
  padding: 30rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 250, 245, 0.95) 100%);
  border-radius: 16rpx;
  box-shadow: 0 8rpx 24rpx rgba(33, 171, 134, 0.12);
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.7);
  animation: slideUp 0.5s ease;
  position: relative;
  overflow: hidden;
}

.result-section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3rpx;
  background: linear-gradient(90deg, transparent, #21ab86, #189e7a, transparent);
  z-index: 1;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
  margin-bottom: 20rpx;
}

.result-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.result-actions {
  display: flex;
  gap: 20rpx;
}

.action-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
  margin-left: 16rpx;
}

.action-button-icon {
  margin-right: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  background: rgba(33, 171, 134, 0.1);
  position: relative;
}

.action-button-text {
  font-size: 24rpx;
  color: #21ab86;
  margin-left: 8rpx;
}

.result-preview {
  width: 100%;
  height: 500rpx;
  position: relative;
  border-radius: 12rpx;
  overflow: hidden;
  margin: 20rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e6f4ee;
}

.result-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.result-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(0, 0, 0, 0.2);
}

.result-preview:active .result-overlay {
  opacity: 1;
}

.zoom-button {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 248, 245, 0.9) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
}

.tech-zoom-icon {
  position: relative;
  width: 26rpx;
  height: 26rpx;
  border: 2rpx solid #21ab86;
  border-radius: 50%;
}

.tech-zoom-icon::before {
  content: '';
  position: absolute;
  right: -8rpx;
  bottom: -2rpx;
  width: 10rpx;
  height: 2rpx;
  background: #21ab86;
  transform: rotate(45deg);
  transform-origin: right center;
}

.tech-zoom-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  background: rgba(33, 171, 134, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse-small 2s infinite;
}

.result-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 20rpx;
}

.result-info {
  font-size: 24rpx;
  color: #5a8a7a;
}

.share-button {
  padding: 12rpx 30rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #21ab86 0%, #189e7a 100%);
  box-shadow: 0 4rpx 12rpx rgba(33, 171, 134, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.share-icon-container {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.tech-share-icon {
  width: 16rpx;
  height: 16rpx;
  background-color: #FFFFFF;
  border-radius: 4rpx;
  position: relative;
}

.tech-share-icon::before {
  content: '';
  position: absolute;
  top: -8rpx;
  left: 4rpx;
  width: 8rpx;
  height: 8rpx;
  border-top: 2rpx solid #FFFFFF;
  border-right: 2rpx solid #FFFFFF;
  transform: rotate(45deg);
}

.tech-share-icon::after {
  content: '';
  position: absolute;
  top: -12rpx;
  left: 8rpx;
  width: 2rpx;
  height: 18rpx;
  background-color: #FFFFFF;
  transform: rotate(-45deg);
}

.share-text {
  font-size: 26rpx;
  color: #FFFFFF;
}

/* API设置区 */
.api-settings {
  position: fixed;
  bottom: 120rpx;
  left: 0;
  right: 0;
  padding: 20rpx 30rpx;
  background-color: rgba(240, 248, 245, 0.95);
  border-top: 1px solid rgba(33, 171, 134, 0.1);
  z-index: 99;
  font-size: 24rpx;
  color: #5a8a7a;
}

.api-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10rpx;
}

.api-help {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: #21ab86;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}

.api-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.api-key-info {
  font-family: monospace;
  color: #21ab86;
}

.icon-refresh {
  display: inline-block;
  width: 24rpx;
  height: 24rpx;
  border: 2rpx solid #21ab86;
  border-radius: 50%;
  position: relative;
}

.icon-refresh::before {
  content: '';
  position: absolute;
  top: 2rpx;
  left: 10rpx;
  width: 8rpx;
  height: 8rpx;
  border-top: 2rpx solid #21ab86;
  border-right: 2rpx solid #21ab86;
  transform: rotate(45deg);
}

.icon-refresh::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  border: 2rpx solid transparent;
  border-bottom: 2rpx solid #21ab86;
  border-left: 2rpx solid #21ab86;
  transform: translateX(-50%);
}

.icon-download {
  display: inline-block;
  width: 20rpx;
  height: 24rpx;
  border: 2rpx solid #21ab86;
  border-top: none;
  position: relative;
}

.icon-download::before {
  content: '';
  position: absolute;
  top: -10rpx;
  left: 50%;
  width: 2rpx;
  height: 16rpx;
  background-color: #21ab86;
  transform: translateX(-50%);
}

.icon-download::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 8rpx;
  height: 8rpx;
  border-bottom: 2rpx solid #21ab86;
  border-right: 2rpx solid #21ab86;
  transform: translateX(-50%) rotate(45deg);
}

/* 加载中遮罩层 */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(245, 248, 255, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 900;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 248, 245, 0.95) 100%);
  padding: 40rpx 60rpx;
  border-radius: 20rpx;
  box-shadow: 0 10rpx 30rpx rgba(33, 171, 134, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

.loading-indicator {
  display: flex;
  justify-content: center;
  margin-bottom: 30rpx;
}

.loading-circle {
  width: 20rpx;
  height: 20rpx;
  margin: 0 10rpx;
  background-color: #21ab86;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

@keyframes bounce {
  0%, 80%, 100% { 
    transform: scale(0);
  } 
  40% { 
    transform: scale(1.0);
  }
}

.loading-text {
  font-size: 28rpx;
  color: #2c5c4e;
  text-align: center;
}

/* 按钮加载状态 */
.button-loading {
  position: relative;
}

.button-loading-indicator {
  display: flex;
  position: absolute;
  right: 30rpx;
}

.loading-dot {
  width: 8rpx;
  height: 8rpx;
  background-color: #FFFFFF;
  border-radius: 50%;
  margin: 0 4rpx;
  opacity: 0;
  animation: loading-dot 1.4s infinite ease-in-out both;
}

@keyframes loading-dot {
  0%, 100% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
}

.run-button-text {
  position: relative;
  z-index: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.progress-indicator {
  height: 4rpx;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.slider-container {
  width: 100%;
  padding: 0 16rpx;
  margin: 20rpx 0;
}

.slider {
  width: 100%;
  height: 4rpx;
  background-color: #e1f1ec;
  position: relative;
  border-radius: 2rpx;
}

.slider-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
}

.slider-handle {
  position: absolute;
  top: 50%;
  width: 24rpx;
  height: 24rpx;
  border-radius: 12rpx;
  background-color: #ffffff;
  border: 3rpx solid #21ab86;
  transform: translate(-50%, -50%);
  box-shadow: 0 2rpx 6rpx rgba(33, 171, 134, 0.2);
}

.radio-container {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.radio {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  border: 2rpx solid #5a8a7a;
  margin-right: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.radio.active {
  border-color: #21ab86;
}

.radio.active::after {
  content: '';
  width: 20rpx;
  height: 20rpx;
  border-radius: 10rpx;
  background-color: #21ab86;
}

.checkbox-container {
  display: flex;
  align-items: center;
  margin: 10rpx 0;
}

.checkbox {
  width: 36rpx;
  height: 36rpx;
  border-radius: 8rpx;
  border: 2rpx solid #5a8a7a;
  margin-right: 16rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.checkbox.active {
  border-color: #21ab86;
  background-color: #21ab86;
}

.checkbox.active::after {
  content: '';
  width: 20rpx;
  height: 10rpx;
  border-left: 3rpx solid #ffffff;
  border-bottom: 3rpx solid #ffffff;
  transform: rotate(-45deg) translate(2rpx, -2rpx);
}

.upload-progress {
  width: 100%;
  height: 6rpx;
  background-color: #e1f1ec;
  border-radius: 3rpx;
  margin: 10rpx 0;
  overflow: hidden;
}

.upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 3rpx;
  transition: width 0.3s ease;
}

.text-link {
  color: #21ab86;
  text-decoration: underline;
  font-weight: 500;
}

/* 侧边任务列表抽屉 */
.task-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  height: 100vh;
  background-color: #FFFFFF;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.drawer-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.drawer-close {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: #21ab86;
  color: #FFFFFF;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
}

.drawer-content {
  padding: 20rpx;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 0;
  border-bottom: 1px solid rgba(33, 171, 134, 0.1);
}

.task-info {
  flex: 1;
}

.task-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.task-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #2c5c4e;
}

.task-status {
  font-size: 24rpx;
  color: #5a8a7a;
}

.task-details {
  font-size: 24rpx;
  color: #5a8a7a;
}

.task-result-preview {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50rpx;
  overflow: hidden;
  margin-left: 20rpx;
}

.task-result-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.task-actions {
  display: flex;
  gap: 10rpx;
}

.task-action-btn {
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
}

.task-action-text {
  font-size: 24rpx;
  color: #21ab86;
}

.task-progress {
  width: 100%;
  height: 4rpx;
  background-color: #e1f1ec;
  border-radius: 2rpx;
  margin-top: 10rpx;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.progress-inner {
  height: 100%;
  background: linear-gradient(90deg, #21ab86 0%, #189e7a 100%);
  border-radius: 2rpx;
  transition: width 0.3s ease;
}

.drawer-actions {
  display: flex;
  justify-content: center;
  padding: 20rpx;
}

.drawer-action-btn {
  padding: 8rpx 16rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
}

.drawer-action-text {
  font-size: 24rpx;
  color: #21ab86;
}

.empty-task-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}

.empty-task-icon {
  font-size: 48rpx;
  color: #21ab86;
  margin-bottom: 16rpx;
}

.empty-task-text {
  font-size: 28rpx;
  color: #5a8a7a;
  margin-bottom: 8rpx;
}

.empty-task-tip {
  font-size: 24rpx;
  color: #5a8a7a;
}

/* 任务列表按钮 */
.task-list-button {
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  border-radius: 30rpx;
  background: linear-gradient(135deg, rgba(33, 171, 134, 0.1) 0%, rgba(24, 158, 122, 0.1) 100%);
  margin-left: 16rpx;
}

.task-list-icon {
  width: 36rpx;
  height: 36rpx;
  border-radius: 18rpx;
  background-color: rgba(33, 171, 134, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
}

.task-list-text {
  font-size: 24rpx;
  color: #21ab86;
}

.task-list-badge {
  padding: 4rpx 8rpx;
  border-radius: 20rpx;
  background-color: #21ab86;
  color: #FFFFFF;
  font-size: 24rpx;
  margin-left: 10rpx;
}

.task-list-line {
  width: 24rpx;
  height: 2rpx;
  background-color: #21ab86;
  margin: 4rpx 0;
}

.drawer-open {
  transform: translateX(0);
  box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
}

.drawer-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

.drawer-empty {
  justify-content: center;
  align-items: center;
  height: 80vh;
}

/* Task item status specific styles */
.task-active {
  border-left: 4rpx solid #21ab86;
  padding-left: 16rpx;
  background: linear-gradient(to right, #f5faf8 0%, #ffffff 100%);
}

.task-completed {
  border-left: 4rpx solid #21ab86;
  padding-left: 16rpx;
}

.task-failed {
  border-left: 4rpx solid #ff3b30;
  padding-left: 16rpx;
}

/* Fullscreen preview */
.fullscreen-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-image {
  max-width: 100%;
  max-height: 90vh;
}

.preview-close {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  font-size: 40rpx;
  line-height: 56rpx;
  text-align: center;
}
</style> 